<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>设备信息</span>
          </div>
          <el-descriptions size="medium" :column="4" border>
            <el-descriptions-item label="设备编号">{{deviceInf.deviceCode}}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{deviceInf.deviceName}}</el-descriptions-item>
            <el-descriptions-item label="设备类型">{{ dict.label.device_type[deviceInf.deviceType] }}</el-descriptions-item>
            <el-descriptions-item label="规格型号">{{deviceInf.deviceModel}}</el-descriptions-item>
            <el-descriptions-item label="品牌">{{deviceInf.brand}}</el-descriptions-item>
            <el-descriptions-item label="使用状态">{{dict.label.device_use_state[deviceInf.useState]}}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{deviceInf.supplier}}</el-descriptions-item>
            <el-descriptions-item label="负责人">{{deviceInf.responsibleUser}}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{deviceInf.createBy}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{deviceInf.createTime}}</el-descriptions-item>
            <el-descriptions-item label="更新人">{{deviceInf.updateBy}}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{deviceInf.updateTime}}</el-descriptions-item>
            <el-descriptions-item label="所在位置" :span="2">{{deviceInf.place}}</el-descriptions-item>
            <el-descriptions-item label="技术参数" :span="2">{{deviceInf.technicalSpecification}}</el-descriptions-item>
            <el-descriptions-item label="描述" :span="4">{{deviceInf.remark}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div class="head-container">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="设备文件" name="file">
                <crudDeviceFile :deviceId="$route.params.id"></crudDeviceFile>
              </el-tab-pane>
              <el-tab-pane label="设备属性" name="second">
                <factoryAttribute :pid="factoryId" ></factoryAttribute>
              </el-tab-pane>
              <el-tab-pane label="保养记录" name="third">保养记录</el-tab-pane>
              <el-tab-pane label="维修记录" name="fourth1">维修记录</el-tab-pane>
              <el-tab-pane label="点检记录" name="fourth2">点检记录</el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudDeviceMain from '@/api/device/deviceMain'
import crudDeviceFile from '../file'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
import factoryAttribute from '../../factory/attribute'
import crudFactoryModel from '@/api/factory/factoryModel'
import {getModels} from "../../../api/factory/factoryModel";

const defaultForm = {
  id: null,
  deviceCode: null,
  deviceName: null,
  deviceType: null,
  deviceModel: null,
  lineCode: null,
  sectionCode: null,
  stationCode: null,
  receiveOrder: null,
  monitor: null,
  remark: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null
}

export default {
  name: 'DeviceDetail',
  components: { pagination, crudOperation, rrOperation, udOperation ,crudDeviceFile,factoryAttribute},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['whether','device_type','device_use_state'],
  computed: {
  ...mapGetters([
      'baseApi'
    ])
  },
  cruds() {
    return CRUD({
      title: '设备详情',
      url: 'api/deviceMain',
      idField: 'id',
      sort: 'id,desc',
      queryOnPresenterCreated: false,
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        reset: true,
        import: false
      },
      crudMethod: { ...crudDeviceMain }})
  },
  data() {
    return {
      activeName: 'file',
      deviceId: 0,
      factoryId: 0,
      deviceCode: '',
      deviceInf: {}
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params.id = this.deviceId;
      return true
    },
    //刷新之后把数据保存
    [CRUD.HOOK.afterRefresh]() {
      this.deviceInf = this.crud.data[0];
      return true
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    }
  },
  created(){
    crudFactoryModel.getModels({modelType:'5',modelCode:this.$route.params.deviceCode}).then(res =>{
      if(res.totalElements >= 1){
        this.factoryId = res.content[0].id;
        this.crud.toQuery();
      }
    })
  },
  mounted() {
    this.deviceId = this.$route.params.id;
    this.crud.toQuery();
  }
}
</script>

<style type="text/css" >

</style>
